<template>
  <div class="list-container">
    <div v-if="listData" class="margin30">
      <el-col :span="12">
        <el-col :span="8">
          <el-select
            v-model="listData.GROWTH_CLASSIFY.cateId"
            placeholder="请选择成长分类"
            style="width: 94%;"
            :disabled="
              options.GROWTH_CLASSIFY && options.GROWTH_CLASSIFY.length > 0
                ? false
                : true
            "
            @change="
              lookUpAndDown(listData.GROWTH_CLASSIFY.cateId, 'GROWTH_CLASSIFY')
            "
          >
            <el-option
              v-for="item in options.GROWTH_CLASSIFY"
              :key="item.cateId"
              :label="item.itemName"
              :value="item.cateId"
            />
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-select
            v-model="listData.STAGE.cateId"
            placeholder="请选择学段"
            style="width: 94%;"
            :disabled="options.STAGE && options.STAGE.length > 0 ? false : true"
            @change="lookUpAndDown(listData.STAGE.cateId, 'STAGE')"
          >
            <el-option
              v-for="item in options.STAGE"
              :key="item.cateId"
              :label="item.itemName"
              :value="item.cateId"
            />
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-select
            v-model="listData.SUBJECT.cateId"
            placeholder="请选择学科"
            style="width: 94%;"
            :disabled="
              options.SUBJECT && options.SUBJECT.length > 0 ? false : true
            "
            @change="lookUpAndDown(listData.STAGE.cateId, 'SUBJECT')"
          >
            <el-option
              v-for="item in options.SUBJECT"
              :key="item.cateId"
              :label="item.itemName"
              :value="item.cateId"
            />
          </el-select>
        </el-col>
      </el-col>
      <el-col :span="20">
        <div class="clearfix marginT30">
          <el-col :span="24">
            <el-col :span="12">
              <div>重点内容</div>
            </el-col>
            <el-col :span="12">
              <div>能力提升点</div>
            </el-col>
          </el-col>
        </div>
        <div
          class="content clearfix"
          :class="listData.SUBJECT.cateId ? '' : 'disabled'"
          style="margin-top: 20px; padding: 0 30px 20px;  border: 1px solid #e4e7ed;"
        >
          <el-col :span="24">
            <el-col :span="12">
              <el-col
                :span="24"
                style="height: 300px; padding: 20px 0; overflow-y: auto; border-right: 1px solid #e4e7ed;"
              >
                <el-radio-group
                  v-if="importTagsList"
                  v-model="keynoteId"
                  class="padding30"
                  style="width: 100%"
                  @change="radioChange"
                >
                  <el-col
                    v-for="(item, index) in importTagsList"
                    :key="index"
                    :span="24"
                    :class="index !== 0 ? 'marginT20' : ''"
                  >
                    <el-col :span="18">
                      <el-radio :label="item.tagsId">
                        {{
                        item.tagsName
                        }}
                      </el-radio>
                    </el-col>
                    <el-col :span="6">
                      <el-button
                        type="text"
                        class="resetBtn"
                        @click="edit(item, index, 'keynote')"
                      >修改</el-button>
                      <el-button
                        type="text"
                        class="resetBtn"
                        @click="delect(item, index, 'keynote')"
                      >删除</el-button>
                    </el-col>
                  </el-col>
                </el-radio-group>
              </el-col>
              <el-col :span="24">
                <div v-if="importTagsList" class="marginT10 marginL20">
                  <el-button
                    type="primary"
                    size="medium"
                    @click="
                      dialogObj.visible = true
                      dialogObj.title = '添加标签'
                      dialogObj.type = 'keynote'
                      dialogObj.isAdd = true
                      dialogObj.val = ''
                    "
                  >添加</el-button>
                </div>
              </el-col>
            </el-col>
            <el-col :span="12">
              <el-col
                v-if="ByPMapperList"
                :span="24"
                :offset="2"
                style="height: 300px; padding: 20px 0; overflow-y: auto;"
              >
                <el-col
                  v-for="(item, index) in ByPMapperList"
                  :key="index"
                  :span="24"
                  :class="index !== 0 ? 'marginT20' : ''"
                >
                  <el-col :span="18">
                    <div class="fs-14">{{ item.tagsName }}</div>
                  </el-col>
                  <el-col :span="6">
                    <el-button type="text" class="resetBtn" @click="edit(item, index, 'ability')">修改</el-button>
                    <el-button
                      type="text"
                      class="resetBtn"
                      @click="delect(item, index, 'ability')"
                    >删除</el-button>
                  </el-col>
                </el-col>
              </el-col>
              <el-col :offset="2" :span="24">
                <div v-if="ByPMapperList" class="marginT10 marginL20">
                  <el-button
                    type="primary"
                    size="medium"
                    @click="
                      dialogObj.visible = true
                      dialogObj.title = '添加标签'
                      dialogObj.type = 'ability'
                      dialogObj.isAdd = true
                      dialogObj.val = ''
                    "
                  >添加</el-button>
                </div>
              </el-col>
            </el-col>
          </el-col>
        </div>
      </el-col>
    </div>

    <el-dialog :title="dialogObj.title" :visible.sync="dialogObj.visible" width="30%">
      <div>
        <el-input v-model="dialogObj.val" placeholder="输入自定义内容" clearable />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogObj.visible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CustomTable from '@/components/CustomTable/index';
import Pagination from '@/components/Pagination/index';
import {
  findByPCateId,
  findImportTagsList,
  findByPMapper,
  addContentTags,
  delTags,
  editTags
} from '@/api/contentTags';
export default {
  name: 'List',

  data () {
    return {
      dialogObj: {
        visible: false,
        title: null,
        val: '',
        type: '',
        isAdd: false
      },

      bizTypeEnum: 'PREPARELESSON',
      options: {
        GROWTH_CLASSIFY: '',
        STAGE: '',
        SUBJECT: ''
      },
      listData: {
        GROWTH_CLASSIFY: {
          cateId: '',
          itemCode: '',
          itemName: ''
        },
        STAGE: {
          cateId: '',
          itemCode: '',
          itemName: ''
        },
        SUBJECT: {
          cateId: '',
          itemCode: '',
          itemName: ''
        }
      },
      importTagsList: null, // 重难点
      ByPMapperList: null, // 能力提升点

      keynoteId: '', // 重难点选项

      value: '',

      total: 0
    };
  },
  created () {
    this.init();
  },
  methods: {
    radioChange (id) {
      console.log(id);
      this.getFindByPMapper(id);
      this.keynoteId = id;
    },

    async init () {
      this.loading = true;
      // 获取成长分类
      await this.getCategory();
    },
    // 获取成长分类
    getCategory () {
      findByPCateId({ bizTypeEnum: this.bizTypeEnum }).then(res => {
        this.options.GROWTH_CLASSIFY = res.data.categoryVoList;
        console.log('GROWTH_CLASSIFY:', this.options.GROWTH_CLASSIFY);
        this.getStage();
      });
    },
    // 获取学段
    getStage () {
      if (
        this.listData.GROWTH_CLASSIFY &&
        this.listData.GROWTH_CLASSIFY.cateId
      ) {
        findByPCateId({
          bizTypeEnum: this.bizTypeEnum,
          pCateId: this.listData.GROWTH_CLASSIFY.cateId
        }).then(res => {
          this.options.STAGE = res.data.categoryVoList;
          console.log('STAGE:', this.options.STAGE);
          this.getSubject();
        });
      } else {
        this.loading = false;
      }
    },
    // 获取学科
    getSubject () {
      if (this.listData.STAGE && this.listData.STAGE.cateId) {
        findByPCateId({
          bizTypeEnum: this.bizTypeEnum,
          pCateId: this.listData.STAGE.cateId
        }).then(res => {
          this.options.SUBJECT = res.data.categoryVoList;
          console.log('SUBJECT:', this.options.SUBJECT);
          this.loading = false;
        });
      } else {
        this.loading = false;
      }
    },

    // 更新数据
    update () {
      if (
        this.listData.GROWTH_CLASSIFY &&
        this.listData.GROWTH_CLASSIFY.cateId
      ) {
        var GROWTH_CLASSIFY = this.options.GROWTH_CLASSIFY.filter(
          growthClassify =>
            growthClassify.cateId === this.listData.GROWTH_CLASSIFY.cateId
        );
        this.listData.GROWTH_CLASSIFY = JSON.parse(
          JSON.stringify(GROWTH_CLASSIFY[0])
        );
      }

      if (this.listData.STAGE && this.listData.STAGE.cateId) {
        var STAGE = this.options.STAGE.filter(
          stage => stage.cateId === this.listData.STAGE.cateId
        );
        this.listData.STAGE = JSON.parse(JSON.stringify(STAGE[0]));
      }

      if (this.listData.SUBJECT && this.listData.SUBJECT.cateId) {
        var SUBJECT = this.options.SUBJECT.filter(
          subject => subject.cateId === this.listData.SUBJECT.cateId
        );
        this.listData.SUBJECT = JSON.parse(JSON.stringify(SUBJECT[0]));
      }
    },

    // 根据上层分类查询下层分类
    lookUpAndDown (id, type) {
      console.log('type:', type);
      this.update();
      findByPCateId({
        bizTypeEnum: this.bizTypeEnum,
        pCateId: id
      }).then(res => {
        var items;
        switch (type) {
          case 'GROWTH_CLASSIFY': // 获取学段
            this.listData.STAGE = {
              cateId: '',
              itemCode: '',
              itemName: ''
            };
            this.listData.SUBJECT = {
              cateId: '',
              itemCode: '',
              itemName: ''
            };
            this.options.STAGE = res.data.categoryVoList;
            break;
          case 'STAGE': // 获取学科
            this.listData.SUBJECT = {
              cateId: '',
              itemCode: '',
              itemName: ''
            };
            this.options.SUBJECT = res.data.categoryVoList;
            break;
          case 'SUBJECT': // 获取内容标签
            // this.getFindImportTags()
            break;
        }
        this.getFindImportTags();
      });
    },

    // 获取内容标签 - 重难点
    getFindImportTags () {
      var data = {
        growthClassify: this.listData.GROWTH_CLASSIFY.itemCode,
        stageId: this.listData.STAGE.itemCode,
        subjectId: this.listData.SUBJECT.itemCode
      };
      if (
        this.listData.GROWTH_CLASSIFY.itemCode &&
        this.listData.STAGE.itemCode &&
        this.listData.SUBJECT.itemCode
      ) {
        findImportTagsList(data).then(res => {
          this.importTagsList = res.data;
          if (res.data.length > 0) {
            this.keynoteId = res.data[0].tagsId;
            this.getFindByPMapper(this.keynoteId);
          }
        });
      } else {
        this.importTagsList = null;
        this.ByPMapperList = null;
      }
    },
    // 获取内容标签 - 能力提升
    getFindByPMapper (id) {
      var data = {
        pMapperTagsId: id
      };
      findByPMapper(data).then(res => {
        this.ByPMapperList = res.data;
      });
    },

    // 新增内容标签
    getAddContentTags (mapperPTagsId, tagsGroupEnum, tagsName) {
      var data = {
        growthClassify: this.listData.GROWTH_CLASSIFY.itemCode,
        mapperPTagsId: mapperPTagsId,
        pTagsId: null,
        stageId: this.listData.STAGE.itemCode,
        subjectId: this.listData.SUBJECT.itemCode,
        tagsGroupEnum: tagsGroupEnum,
        tagsName: tagsName
      };
      addContentTags(data).then(res => {
        if (tagsGroupEnum === 'IMPORTANT') {
          this.importTagsList.push(res.data);
        }
        if (tagsGroupEnum === 'ABILITY_ENHANCEMENT') {
          this.ByPMapperList.push(res.data);
        }
        this.dialogObj.val = '';
        this.dialogObj.visible = false;
        this.$message({
          message: '添加成功',
          type: 'success'
        });
      });
    },

    // 保存按钮
    save () {
      console.log('dialogObj:', this.dialogObj);
      if (this.dialogObj.isAdd) {
        // 新增内容标签
        this.dialogObj.type === 'keynote'
          ? this.getAddContentTags(null, 'IMPORTANT', this.dialogObj.val)
          : this.getAddContentTags(
            this.keynoteId,
            'ABILITY_ENHANCEMENT',
            this.dialogObj.val
          );
      } else {
        // 修改内容标签
        editTags({
          tagsId: this.dialogObj.tagsId,
          tagsName: this.dialogObj.val,
          tagsTypeEnum: 'CONTENT_TAGS'
        }).then(res => {
          var obj = {
            tagsId: this.dialogObj.tagsId,
            tagsName: this.dialogObj.val
          };
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.dialogObj.type === 'keynote'
            ? this.importTagsList.splice(this.dialogObj.index, 1, obj)
            : this.ByPMapperList.splice(this.dialogObj.index, 1, obj);
          this.dialogObj.visible = false;
        });
      }
    },

    // 编辑
    edit (item, index, type) {
      console.log('item, index, type:', item, index, type);
      this.dialogObj = {
        val: item.tagsName,
        visible: true,
        title: '编辑标签',
        isAdd: false,
        type: type,
        tagsId: item.tagsId,
        index: index
      };

      // if (this.dialogObj.type === 'keynote') {
      //   // 重点内容
      //   this.getAddContentTags(null, 'IMPORTANT', this.dialogObj.val)
      // } else {
      //   // 能力提升
      //   this.getAddContentTags(
      //     this.keynoteId,
      //     'ABILITY_ENHANCEMENT',
      //     this.dialogObj.val
      //   )
      // }
    },

    // 删除
    delect (item, index, type) {
      console.log('dialogObj:', this.dialogObj);
      const msg = '确认是否删除该标签！';
      this.$confirm(msg, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delTags(item.tagsId).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            type === 'keynote'
              ? this.importTagsList.splice(this.dialogObj.index, 1)
              : this.ByPMapperList.splice(this.dialogObj.index, 1);

            this.dialogObj.visible = false;
          });
        })
        .catch(() => {
          // 取消操作
          console.log('cancel');
        });
      // if (this.dialogObj.type === 'keynote') {
      //   // 重点内容
      //   this.getAddContentTags(null, 'IMPORTANT', this.dialogObj.val)
      // } else {
      //   // 能力提升
      //   this.getAddContentTags(
      //     this.keynoteId,
      //     'ABILITY_ENHANCEMENT',
      //     this.dialogObj.val
      //   )
      // }
    }
  }
};
</script>

<style lang="scss" scoped>
.el-button + .el-button {
  margin-left: 10px;
}
.resetBtn {
  padding: 0;
  line-height: 1;
}
.disabled {
  background-color: #f5f7fa;
}
.content-style {
  > span {
    display: block;
  }
}
.img-style-size {
  max-width: 250px;
}

.record {
  border: 1px solid #e2e5ed;
  padding: 15px 20px;
}
</style>
